import React from 'react'
import { useNavigate, useLocation } from 'react-router-dom';
import detailData from '../../assets/data/detailData';

function Detail(props = {}) {
  const { data = [] } = props
  let navigate = useNavigate();
  const { search = '' } = useLocation()

  const searchId = search.split('=')[1]
  const detailDataObj = detailData()

  function pathSwitch(path = `/`) {
    navigate(path)
  }

  return (
    <div style={{ border: '1px solid transparent', width: '100%', padding: 'auto', boxSizing: 'border-box' }}>
      <div style={{ marginTop: '100px' }}>
        <div style={{ display: 'flex', width: '66%', margin: 'auto', justifyContent: 'space-between' }}>
          <div></div>
          <h1 className='cursor-pointer' style={{ margin: '0 0 20px 20px' }} onClick={() => pathSwitch()}>X</h1>
        </div>
        {detailDataObj[searchId] && detailDataObj[searchId]['data'] && <>
          <div style={{ display: 'flex', width: '66%', margin: 'auto' }}>
            <div style={{ margin: '100px 0 0' }}>
              {
                detailDataObj[searchId]['data'].map((e, i) => {
                  const { title, content } = e
                  return <div style={{ display: 'flex', width: '130px', margin: '0 0 10px' }}>
                    <div style={{ minWidth: '10px', background: 'blue', borderRadius: '5px', margin: '0 10px' }}></div>
                    <div>{title}</div>
                  </div>
                })
              }
            </div>
            <div style={{ margin: '0 20px' }}>
              {
                detailDataObj[searchId]['data'].map((e, i) => {
                  const { title, content } = e
                  return <div style={{ flex: 1 }}>
                    <h1>{title}</h1>
                    <div>{content}</div>
                  </div>
                })
              }
            </div>
            <div>
              {
                detailDataObj[searchId]['data'].map((e, i) => {
                  const { title, content } = e
                  return <div style={{ display: 'flex', width: '100px', background: 'gold' }}>右侧内容</div>
                })
              }
            </div>
          </div>
        </>}
      </div>
      <div style={{ display: 'flex', background: 'gold', margin: '100px 0 100px 100px' }}>
        <div className='mr10'>图标1</div>
        <div className='mr10'>图标2</div>
        <div className='mr10'>图标3</div>
        <div className='mr10'>文字1</div>
        <div className='mr10'>文字2</div>
        <div className='mr10'>文字3</div>
        <div className='mr10'>文字4</div>
      </div>
    </div>
  )
}

export default Detail